<template>
    <el-dialog 
    width="34%"
    v-model="state.dialogVisible" @close-auto-focus="cancelHadle" draggable="true">

      <el-dialog
      v-model="innerVisible"
        width="30%"
        title="警告"
        align-center
        append-to-body
  >
    <span>将该账号从数据库中删除，这是一个危险行为，此操作不可逆！</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="innerVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">
          确认删除
        </el-button>
      </span>
    </template>
  </el-dialog>

        <template #header="{ titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">{{ props.type == 'edit' ? '编辑' : '查看详情' }}</h4>

            </div>
        </template>
            <el-form 
            label-position="top"
            :model="state.updateForm" label-width="80px" ref="userForm"
            style="padding:20px"
            
            >
                
                <el-form-item>
                   <div style="display:flex;width:100%;justify-content:center;">
                    <el-avatar :src="serverUrl + '\\' + state.updateForm.avatar" alt="用户头像" :size="100"></el-avatar>
                   </div>
                </el-form-item>

                <el-form-item label="昵称">
                <el-input v-model="state.updateForm.nickname"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                <el-input v-model="state.updateForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="个性签名">
                <el-input v-model="state.updateForm.personalSignature"></el-input>
                </el-form-item>
                <el-form-item label="用户ID">
                <el-input v-model="state.updateForm._id" disabled></el-input>
                </el-form-item>
                <el-form-item label="账号">
                <el-input v-model="state.updateForm.account" disabled></el-input>
                </el-form-item>
                <el-form-item label="角色">
                  
                    <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="更改此项将会修改用户在本系统中的使用权限，请谨慎修改"
                    placement="right"
                    >
                    <el-select v-model="state.updateForm.role" class="m-2" placeholder="Role" size="large">
                    <el-option
                    v-for="item in [{value:'admin',label:'管理员'},{value:'user',label:'普通用户'}]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
                </el-tooltip>
            

                </el-form-item>
                <el-form-item label="创建时间">
                <el-input v-model="state.updateForm.createdAt" disabled></el-input>
                </el-form-item>
         
            </el-form>
      
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelHadle">取消</el-button>
                <el-button v-if="props.type === 'edit'" type="danger" @click="innerVisible = true">
                    从库中删除
                </el-button>
                <el-button v-if="props.type === 'edit'" type="primary" @click="UpdateInfo">
                    提交
                </el-button>
                
            </span>
        </template>
    </el-dialog>
</template>

<script setup>


import { ElNotification } from 'element-plus';

import { reactive, defineProps, defineEmits, onMounted, ref } from 'vue'
import requestMethods from '../../api/api'

const props = defineProps({
    type: String,
    data: Object,
    visible: Boolean
})

const serverUrl = process.env.VUE_APP_AVATAR_API
const emits = defineEmits(['toggle','refresh'])
const state = reactive({
    rowData: {},
    dialogVisible: props.visible,
    updateForm: {}
})
const innerVisible = ref(false)

onMounted(() => {
    state.rowData = JSON.parse(JSON.stringify(props.data))
    state.updateForm = state.rowData
})

const confirmDelete = () =>{

    requestMethods.deleteUserById(state.rowData._id).then(res=>{
        console.log(res);
        ElNotification({
            title:'操作成功',
            type:'warning',
            message:res.data.message
        })
        innerVisible.value = false
        emits('toggle', { toggle: false })
        emits('refresh',{ refresh : true})
    }).catch(err=>{
        console.log(err);
        ElNotification({
            title:'操作失败',
            type:'error',
            message:err.data.message
        })
    })

    
}

const UpdateInfo = () => {
    
    console.log(state.rowData);
    
    console.log(state.updateForm);

    requestMethods.updateUserById(state.updateForm,state.rowData._id).then(res=>{
        
        if(res.status == 200){
            ElNotification({
            title:'操作成功',
            type:'success',
            message:res.data.message
        })
        }
    }).catch(err=>{
        
        ElNotification({
            title:'错误',
            type:'warning',
            message:err.data.message
        })
    })
    emits('toggle', { toggle: false })
    emits('refresh',{ refresh : true})

}

const cancelHadle = () => {
    emits('toggle', { toggle: false })
    state.updateForm = state.rowData
    console.log(props.data);
    console.log(state.rowData);
}


</script>

<style>
.el-avatar{
    border:1px solid #666;
}
</style>